<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      list-style: none;
      display: flex;
    }

    li {
      cursor: pointer;
      margin-right: 10px;
    }

    .active {
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
  <div id="box">
    {{content}} <br> {{val}}<br> {{val1}}<br> {{val2}}<br> {{chk}}<br> {{sex}}
    <hr>

    <input type="text" v-model="val"><!--文本框-->
    <br>
    <textarea v-model="val1"></textarea><!--富文本框-->
    <br>
    男: <input type="radio" value="男" v-model="sex">
    女: <input type="radio" value="女" v-model="sex">
    <br>
    <input type="checkbox" value="1" v-model="chk"><!--多选框-->
    <input type="checkbox" value="2" v-model="chk"><!--多选框-->
    <br>

    <select v-model="val2">
      <option value="德玛西亚">德玛西亚</option>
      <option value="诺克萨斯">诺克萨斯</option>
      <option value="约德尔">约德尔</option>
    </select>



  </div>
  <script>
    new Vue({
      el: '#box',
      data: {
        content: 'hello Vue',
        val: 11123,
        val1: "我不是喷火龙",
        val2: '种族',
        chk: [],
        sex: []
      },

    })
  </script>
  <script>

  </script>
</body>

</html>